<template>
  <div>
    <div class="flex justify-between mb-2 flex-row-reverse">
      <div v-if="showModelTool" class="flex justify-end" style="width: 350px;">
        <el-popover
          v-if="editModel"
          placement="bottom"
          width="250"
          trigger="hover"
        >
          <div @click="editModel= false">{{ $t('close') }}</div>
          <el-button
            slot="reference"
            icon="el-icon-edit"
            type="primary"
            @click="editModel= false"
          />
        </el-popover>
        <el-popover
          v-else
          placement="bottom"
          width="250"
          trigger="hover"
        >
          <div class="text-gray-400">
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('show') + $t('param') }}</div>
              <el-switch
                v-model="showParamList"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showParamListChange"
              />
            </div>
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('show') + $t('setting') }}</div>
              <el-switch
                v-model="showSettingList"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showSettingListChange"
              />
            </div>
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('show') + $t('explain') }}</div>
              <el-switch
                v-model="showExplainList"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showExplainListChange"
              />
            </div>
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('show') + $t('child') + $t('device') }}</div>
              <el-switch
                v-model="showChildDevice"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showChildDeviceChange"
              />
            </div>
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('enable')+$t('script') }}</div>
              <el-switch
                v-model="enableEval"
                active-value="1"
                inactive-value="0"
                style="margin-top: 5px"
                @change="enableEvalChange"
              />
            </div>
            <el-divider />
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('show') + $t('camera') }}</div>
              <el-switch
                v-model="showCameraList"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showCameraListChange"
              />
            </div>
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('view') }}</div>
              <el-switch
                v-model="showView"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showUniInterfaceChange"
              />
            </div>
            <el-divider />
            <div class=" config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('open') + $t('search') }}
              </div>
              <el-switch
                v-model="showSearchInfo"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showSearchInfoChange"
              />
            </div>
            <div class=" config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('sensor') + $t('hidden') }}</div>
              <el-switch
                v-model="showSensorAuto"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showSensorAutoChange"
              />
            </div>
            <div class=" config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('show') + $t('hidden') }}
              </div>
              <el-switch
                v-model="showHidden"
                style="margin-top: 5px"
                active-value="1"
                inactive-value="0"
                @change="showHiddenChange"
              />
            </div>
            <div class="config-item">
              <div style="line-height: 30px;font-size:15px">{{ $t('edit') }}</div>
              <el-switch
                v-model="editModel"
                style="margin-top: 5px"
              />
            </div>
          </div>
          <el-button
            slot="reference"
            icon="el-icon-s-tools"
            type="primary"
          />
        </el-popover>
        <el-radio-group
          v-model="model"
          class="ml-2"
          @change="modelChange"
        >
          <el-radio-button
            v-if="showView === '1'"
            label="view"
          >
            <i class="el-icon-thumb" />
          </el-radio-button>
          <el-radio-button label="block"><i class="el-icon-menu" /></el-radio-button>
          <el-radio-button label="list"><i class="el-icon-folder" /></el-radio-button>
          <el-radio-button label="line"><i class="el-icon-s-data" /></el-radio-button>
          <el-radio-button label="monitor"><i class="el-icon-monitor" /></el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="showSearchInfo === '1'">
        <el-input
          v-model="searchName"
          prefix-icon="el-icon-search"
          clearable
          style="width: 150px"
        />
      </div>
      <div
        v-if="!showModelTool || (showSearchInfo !== '1' && model !== 'monitor')"
        style="font-size: 12px;"
        class="truncate flex-shrink flex-grow"
      >
        <div style="line-height: 13px;" class="primary-color">{{ device.deviceName }} [ {{ device.deviceCore }} ]
        </div>
        <div style="color: #909399;" class="mt-1 flex flex-wrap">
          <div class="mr-1">{{ device.address }}</div>
          <div v-if="weather" class="flex">
            <span class="mr-1">[ {{ weather.weather }} {{ weather.temperature }}°C</span>
            <span class="mr-1">{{ weather.lowTemperature }}°C ~ {{ weather.highTemperature }}°C</span>
            <span><span>{{ weather.winDirection }}</span> <span>{{ weather.winGrade }}</span> <span>{{
              weather.winSpeed
            }}</span> ]</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="model === 'view'">
      <iframe
        v-if="device.viewSign.indexOf('http') === 0"
        :src="device.viewSign+'&deviceCore='+device.deviceCore+'&token='+token+'&language='+language+'&userId='+userId"
        style="width:100%;height:calc(100vh - 175px)"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="no"
        allowtransparency="yes"
      />
      <solar v-else-if="device.viewSign === 'solar'" :device="device" />
      <pest v-else-if="device.viewSign === 'pest'" :device="device" />
      <weather-station v-else-if="device.viewSign === 'weatherStation'" :device="device" />
      <lamp v-else-if="device.viewSign === 'lamp'" :device="device" />
      <gyroscope v-else-if="device.viewSign === 'gyroscope'" :device="device" />
      <ts-rtu-box v-else-if="device.viewSign === 'tsRtuBox'" :device="device" />
      <div v-else="" style="text-align: center;margin-top: 200px">
        <span style="font-size: 100px;">{{ $t('unKnow') }}{{ $t('view') }}</span>
      </div>
    </div>
    <div v-else-if="model === 'monitor'">
      <monitor :show-hidden="showHidden" />
    </div>
    <div v-else>
      <!--      <el-alert-->
      <!--        v-show="!ws"-->
      <!--        :title="'websocket '+$t('OFFLINE')"-->
      <!--        type="error"-->
      <!--        :close-text="$t('confirm')"-->
      <!--        @close="initSocket"-->
      <!--      />-->
      <device-camera v-if="showCameraList === '1'" :device-core="device.deviceCore" :model="model" />
      <div v-if="model === 'block' || model === 'line'">
        <div
          v-for="(item,index) in sensorList"
          :key="index"
        >
          <div style="height: 40px;display: flex;justify-content: space-between">
            <div v-if="item.editSensor == true" style="margin-top: 5px">
              <el-input
                v-model="item.sensorName"
                style="width: 300px"
              >
                <el-button
                  slot="append"
                  icon="el-icon-check"
                  @click="updateSensorName(item)"
                />
                <el-button
                  slot="append"
                  icon="el-icon-close"
                  @click.stop="cancelUpdateSensorName(item)"
                />
              </el-input>
            </div>
            <div
              v-else
              class="text-gray-400"
              style="line-height: 40px;font-size:15px;"
              @click="editSensor(item)"
            >
              <span class="primary-color">{{ formatSensorType(item.type) }}{{ $t('port') }}:{{ item.port }}</span>
              <span v-if="item.sensorName!==''" style="margin-left: 3px">{{ item.sensorName }}</span>
              <span v-if="item.status" style="margin-left: 3px">{{ formatSensorStatus(item.status) }}</span>
            </div>
            <el-row style="float: right;margin-top: 5px">
              <el-popover
                placement="bottom"
                width="200"
                trigger="hover"
              >
                <div class="text-gray-400">
                  <div v-if="devModel" class="config-item" @click="gotoParam(item)">
                    <div style="line-height: 30px;font-size:15px">{{
                      $t('param') + $t('manage')
                    }}
                    </div>
                  </div>
                  <div v-if="devModel" class="config-item" @click="gotoExplain(item)">
                    <div style="line-height: 30px;font-size:15px">{{
                      $t('explain') + $t('manage')
                    }}
                    </div>
                  </div>
                  <div v-if="devModel" class="config-item" @click="gotoSetting(item)">
                    <div style="line-height: 30px;font-size:15px">{{
                      $t('setting') + $t('manage')
                    }}
                    </div>
                  </div>
                  <div class="config-item" @click="gotoComparison(item)">
                    <div style="line-height: 30px;font-size:15px">{{
                      $t('explain') + $t('comparison')
                    }}
                    </div>
                  </div>
                </div>
                <el-button
                  slot="reference"
                  style="margin-left: 13px"
                  type="text"
                  icon="el-icon-caret-bottom"
                />
              </el-popover>
              <el-button
                style="margin-left: 13px"
                type="text"
                :disabled="item.explainList.length < 1"
                @click="gotoSensorRealTime(item)"
              >{{ $t('realTime') }}
              </el-button>
              <el-button
                style="margin-left: 13px"
                type="text"
                :disabled="item.saveInterval < 0 || item.explainList.length < 1"
                @click="gotoSensorHistory(item)"
              >{{ $t('history') }}
              </el-button>
            </el-row>
          </div>
          <device-explain
            v-if="showExplainList === '1'"
            :show-hidden="showHidden"
            :enable-eval="enableEval"
            :edit-model="editModel"
            :sensor="item"
            :device="device"
            :model="model"
            :search-name="searchName"
          />
          <device-param
            v-if="showParamList === '1'"
            :show-hidden="showHidden"
            :edit-model="editModel"
            :param-list="item.paramList"
            :model="model"
            :search-name="searchName"
          />
          <device-setting
            v-if="showSettingList === '1'"
            :show-hidden="showHidden"
            :edit-model="editModel"
            :setting-list="item.settingList"
            :model="model"
            :search-name="searchName"
            :device-core="device.deviceCore"
          />
        </div>
      </div>
      <div v-else-if="model=='list'">
        <el-table
          ref="sensorTable"
          :highlight-current-row="true"
          :data="sensorList"
          :empty-text="$t('not')+$t('sensor')"
          @expand-change="sensorExpandChange"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div style="height:45px ">
                <div style="float: right">
                  <el-tooltip effect="dark" :content="$t('param')+$t('manage')" placement="top-start">
                    <el-button
                      v-if="devModel"
                      plain
                      icon="el-icon-menu"
                      type="primary"
                      @click="gotoParam(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip effect="dark" :content="$t('setting')+$t('manage')" placement="top-start">
                    <el-button
                      v-if="devModel"
                      plain
                      icon="el-icon-setting"
                      type="primary"
                      @click="gotoSetting(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip effect="dark" :content="$t('explain')+$t('manage')" placement="top-start">
                    <el-button
                      v-if="devModel"
                      plain
                      type="primary"
                      icon="el-icon-guide"
                      @click="gotoExplain(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip effect="dark" :content="$t('explain')+$t('comparison')" placement="top-start">
                    <el-button
                      plain
                      type="primary"
                      icon="el-icon-data-line"
                      :disabled="scope.row.saveInterval<0 || scope.row.explainList.length < 1"
                      @click="gotoComparison(scope.row)"
                    />
                  </el-tooltip>
                </div>
              </div>
              <device-explain
                v-if="showExplainList === '1'"
                :show-hidden="showHidden"
                :enable-eval="enableEval"
                :edit-model="editModel"
                :sensor="scope.row"
                :device-status="device.status"
                :model="model"
                :search-name="searchName"
              />
              <device-param
                v-if="showParamList === '1'"
                :show-hidden="showHidden"
                :edit-model="editModel"
                :param-list="scope.row.paramList"
                :model="model"
                :search-name="searchName"
              />
              <device-setting
                v-if="showSettingList === '1'"
                :show-hidden="showHidden"
                :edit-model="editModel"
                :setting-list="scope.row.settingList"
                :model="model"
                :search-name="searchName"
                :device-core="device.deviceCore"
              />
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div style="display: flex">
                <device-sensor-icon
                  :sensor="scope.row"
                  style="margin-top: 10px;margin-right: 10px"
                  @change="listSensorWith"
                />
                <div style="margin-top: 5px">
                  <div v-if="scope.row.editSensor==true">
                    <el-input
                      v-model="scope.row.sensorName"
                      style="width: 300px"
                    >
                      <el-button
                        slot="append"
                        icon="el-icon-check"
                        @click="updateSensorName(scope.row)"
                      />
                      <el-button
                        slot="append"
                        icon="el-icon-close"
                        @click.stop="cancelUpdateSensorName(scope.row)"
                      />
                    </el-input>
                  </div>
                  <div
                    v-else
                    style="font-size:13px;height: 20px"
                    class="text-gray-400"
                    @click="editSensor(scope.row)"
                  >
                    <span class="primary-color">{{ formatSensorType(scope.row.type) }}{{ $t('port') }}:{{
                      scope.row.port
                    }}</span>
                    <span v-if="scope.row.sensorName!==''" style="margin-left: 3px;">{{ scope.row.sensorName }}</span>
                    <span
                      v-if="scope.row.status"
                      style="margin-left: 3px"
                    >{{ formatSensorStatus(scope.row.status) }}</span>
                  </div>
                  <div class="text-gray-400" style="font-size:13px;">{{ formatDate(scope.row.valueDate) }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="140">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-data-line"
                :disabled="scope.row.explainList.length < 1"
                @click="gotoSensorRealTime(scope.row)"
              >{{ $t('realTime') }}
              </el-button>
              <el-button
                style="margin-top: 5px;margin-left: 0px"
                type="primary"
                icon="el-icon-date"
                :disabled="scope.row.saveInterval<0 || scope.row.explainList.length < 1"
                @click="gotoSensorHistory(scope.row)"
              >{{ $t('history') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <item
      v-for="(item,index) in childDeviceList"
      :key="index"
      class="mt-5"
      :device="item"
      :show-model-tool="false"
    />
  </div>
</template>

<script>
import { formatDate, formatSensorType, successNotice } from '@/util/common'
import Solar from '@/views/Solar'
import Pest from '@/views/Pest'
import WeatherStation from '@/views/WeatherStation'
import Lamp from '@/views/Lamp'
import Gyroscope from '@/views/Gyroscope'
import TsRtuBox from '@/views/TsRtuBox'
import { listSensorWith, updateSensor } from '@/api/iot/iotDeviceSensorApi'
import { getWeather } from '@/api/common/commonWeatherApi'
import DeviceExplain from '../DeviceExplain'
import DeviceCamera from '../DeviceCamera'
import DeviceSetting from '../DeviceSetting'
import Monitor from '../Monitor'
import {
  getDevModel,
  getEnableEval,
  getLanguage,
  getNetModel,
  getSensorModel,
  getShowCameraList,
  getShowChildDevice,
  getShowExplainList,
  getShowHidden,
  getShowParamList,
  getShowSearchInfo,
  getShowSensorAuto,
  getShowSettingList,
  getShowView,
  getToken,
  getUserId,
  setEnableEval,
  setSensorModel,
  setShowCameraList,
  setShowChildDevice,
  setShowExplainList,
  setShowHidden,
  setShowParamList,
  setShowSearchInfo,
  setShowSensorAuto,
  setShowSettingList,
  setShowView
} from '@/util/storage'
import DeviceParam from '../DeviceParam'
import DeviceSensorIcon from '@/components/DeviceSensorIcon'
import { leaveWebSocket, listenWebSocket } from '@/util/websocketTool'
import { listDeviceBindChildDevice } from '@/api/iot/iotDeviceBindApi'
import Item from '@/components/SensorCameraList/Item'

export default {
  name: 'Item',
  components: {
    DeviceSetting,
    DeviceExplain,
    DeviceCamera,
    DeviceParam,
    DeviceSensorIcon,
    Solar,
    Pest,
    WeatherStation,
    Lamp,
    Gyroscope,
    Monitor,
    TsRtuBox,
    Item
  },
  props: {
    device: {
      type: Object,
      default: null
    },
    showModelTool: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      editModel: false,
      model: getSensorModel(),
      showParamList: getShowParamList(),
      showCameraList: getShowCameraList(),
      showExplainList: getShowExplainList(),
      showSettingList: getShowSettingList(),
      showChildDevice: getShowChildDevice(),
      showView: getShowView(),
      showSensorAuto: getShowSensorAuto(),
      showSearchInfo: getShowSearchInfo(),
      showHidden: getShowHidden(),
      sensorList: [],
      sensor: null,
      searchName: '',
      userId: getUserId(),
      // ws: null,
      lastDeviceCore: null,
      enableEval: getEnableEval(),
      weather: null,
      netModel: getNetModel(),
      childDeviceList: [],
      token: getToken(),
      language: getLanguage(),
      wsMonitor: {
        room: 'iot:device:' + this.device.deviceCore,
        onmessage: this.onSocketMsg
      },
      devModel: getDevModel() === 'true'
    }
  },
  watch: {
    device: {
      deep: true,
      handler(val) {
        if (this.device && this.device.deviceCore) {
          this.listDeviceBindChildDevice()
          this.listSensorWith()
          this.getWeather()
          if (this.lastDeviceCore != null) {
            leaveWebSocket(this.wsMonitor)
            // this.ws.send(JSON.stringify({
            //   cmd: 'unBindRoom',
            //   param: 'iot:device:' + this.lastDeviceCore
            // }))
          }
          this.wsMonitor.room = 'iot:device:' + this.device.deviceCore
          listenWebSocket(this.wsMonitor)
          // this.ws.send(JSON.stringify({
          //   cmd: 'bindRoom',
          //   param: 'iot:device:' + this.device.deviceCore
          // }))
          this.lastDeviceCore = this.device.deviceCore
        }
      }
    }
  },
  beforeDestroy() {
    this.closeSocket()
  },
  created() {
    if (this.device && this.device.deviceCore != null) {
      this.lastDeviceCore = this.device.deviceCore
      this.listDeviceBindChildDevice()
      this.listSensorWith()
      this.getWeather()
      // this.initSocket()
      this.wsMonitor.room = 'iot:device:' + this.device.deviceCore
      listenWebSocket(this.wsMonitor)
    }
  },
  methods: {
    listDeviceBindChildDevice() {
      if (this.showChildDevice !== '1') {
        this.childDeviceList = []
        return
      }
      listDeviceBindChildDevice({
        parentDeviceCore: this.device.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.childDeviceList = data
        } else {
          this.childDeviceList = []
        }
      })
    },
    getWeather() {
      if (this.netModel === 'local') {
        this.weather = null
        return
      }
      if (!this.device.address || this.device.address === '') {
        this.weather = null
        return
      }
      getWeather({ deviceCore: this.device.deviceCore }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.weather = data
        } else {
          this.weather = null
        }
      })
    },
    onSocketMsg(nowData) {
      if (nowData.type === 'deviceData') {
        const data = JSON.parse(nowData.msg)
        if (data.deviceUpload) {
          if (data.deviceUpload.setting) {
            this.sensorList.forEach(deviceSensor => {
              if (deviceSensor.settingList && deviceSensor.settingList.length > 0) {
                for (let i = 0, j = deviceSensor.settingList.length; i < j; i++) {
                  const deviceSetting = deviceSensor.settingList[i]
                  if (data.deviceUpload.setting.keyName === deviceSetting.keyName && data.deviceUpload.setting.port === deviceSetting.port) {
                    deviceSetting.value = data.deviceUpload.setting.value
                    deviceSetting.updateDate = nowData.timestamp
                    deviceSensor.settingList.splice(i, 1, deviceSetting)
                  }
                }
              }
            })
          }
          if (data.deviceUpload.sensorList && data.deviceUpload.sensorList.length > 0) {
            data.deviceUpload.sensorList.forEach(sensor => {
              this.sensorList.forEach(deviceSensor => {
                if (sensor.port === deviceSensor.port) {
                  if (sensor.explainList && sensor.explainList.length > 0 && deviceSensor.explainList && deviceSensor.explainList.length > 0) {
                    sensor.explainList.forEach(explain => {
                      for (let i = 0, j = deviceSensor.explainList.length; i < j; i++) {
                        const deviceExplain = deviceSensor.explainList[i]
                        if (explain.keyName === deviceExplain.keyName) {
                          deviceExplain.lastValue = deviceExplain.value
                          deviceExplain.lastRawValue = deviceExplain.rawValue
                          deviceExplain.value = explain.value
                          deviceExplain.rawValue = explain.rawValue
                          deviceExplain.valueDate = nowData.timestamp
                          deviceSensor.explainList.splice(i, 1, deviceExplain)
                        }
                      }
                    })
                  }
                  if (sensor.paramList && sensor.paramList.length > 0 && deviceSensor.paramList && deviceSensor.paramList.length > 0) {
                    sensor.paramList.forEach(param => {
                      for (let i = 0, j = deviceSensor.paramList.length; i < j; i++) {
                        const deviceParam = deviceSensor.paramList[i]
                        if (param.keyName === deviceParam.keyName) {
                          deviceParam.value = param.value
                          deviceParam.updateDate = nowData.timestamp
                          deviceSensor.paramList.splice(i, 1, deviceParam)
                        }
                      }
                    })
                  }
                  if (sensor.settingList && sensor.settingList.length > 0 && deviceSensor.settingList && deviceSensor.settingList.length > 0) {
                    sensor.settingList.forEach(setting => {
                      for (let i = 0, j = deviceSensor.settingList.length; i < j; i++) {
                        const deviceSetting = deviceSensor.settingList[i]
                        if (setting.keyName === deviceSetting.keyName) {
                          deviceSetting.value = setting.value
                          deviceSetting.updateDate = nowData.timestamp
                          deviceSensor.settingList.splice(i, 1, deviceSetting)
                        }
                      }
                    })
                  }
                }
              })
            })
          }
        }
      }
    },
    closeSocket() {
      leaveWebSocket(this.wsMonitor)
      // if (this.ws) {
      //   this.ws.send(JSON.stringify({
      //     cmd: 'unBindRoom',
      //     param: 'iot:device:' + this.device.deviceCore
      //   }))
      //   this.ws.onclose = null
      //   this.ws.close()
      // }
      // this.ws = null
    },
    // initSocket() {
    // const that = this
    // this.closeSocket()
    // this.ws = newWebSocket()
    // this.ws.onopen = () => {
    //   that.ws.send(JSON.stringify({
    //     cmd: 'bindRoom',
    //     param: 'iot:device:' + that.device.deviceCore
    //   }))
    // }
    // this.ws.onerror = function(e) {
    //   console.error('WebSocket is error' + e.code + ' ' + e.reason + ' ' + e.wasClean)
    //   that.closeSocket()
    //   setTimeout(function() {
    //     that.initSocket()
    //   }, 20000)
    // }
    // this.ws.onclose = function(e) {
    //   console.error('WebSocket is close' + e.code + ' ' + e.reason + ' ' + e.wasClean)
    //   that.closeSocket()
    //   setTimeout(function() {
    //     that.initSocket()
    //   }, 20000)
    // }
    // this.ws.onmessage = function(msg) {
    //   const nowData = JSON.parse(msg.data)
    //   if (nowData.type === 'deviceData') {
    //     const data = JSON.parse(nowData.msg)
    //     if (data.deviceUpload) {
    //       if (data.deviceUpload.setting) {
    //         that.sensorList.forEach(deviceSensor => {
    //           if (deviceSensor.settingList && deviceSensor.settingList.length > 0) {
    //             for (let i = 0, j = deviceSensor.settingList.length; i < j; i++) {
    //               const deviceSetting = deviceSensor.settingList[i]
    //               if (data.deviceUpload.setting.keyName === deviceSetting.keyName && data.deviceUpload.setting.port === deviceSetting.port) {
    //                 deviceSetting.value = data.deviceUpload.setting.value
    //                 deviceSetting.updateDate = nowData.timestamp
    //                 deviceSensor.settingList.splice(i, 1, deviceSetting)
    //               }
    //             }
    //           }
    //         })
    //       }
    //       if (data.deviceUpload.sensorList && data.deviceUpload.sensorList.length > 0) {
    //         data.deviceUpload.sensorList.forEach(sensor => {
    //           that.sensorList.forEach(deviceSensor => {
    //             if (sensor.port === deviceSensor.port) {
    //               if (sensor.explainList && sensor.explainList.length > 0 && deviceSensor.explainList && deviceSensor.explainList.length > 0) {
    //                 sensor.explainList.forEach(explain => {
    //                   for (let i = 0, j = deviceSensor.explainList.length; i < j; i++) {
    //                     const deviceExplain = deviceSensor.explainList[i]
    //                     if (explain.keyName === deviceExplain.keyName) {
    //                       deviceExplain.lastValue = deviceExplain.value
    //                       deviceExplain.lastRawValue = deviceExplain.rawValue
    //                       deviceExplain.value = explain.value
    //                       deviceExplain.rawValue = explain.rawValue
    //                       deviceExplain.valueDate = nowData.timestamp
    //                       deviceSensor.explainList.splice(i, 1, deviceExplain)
    //                     }
    //                   }
    //                 })
    //               }
    //               if (sensor.paramList && sensor.paramList.length > 0 && deviceSensor.paramList && deviceSensor.paramList.length > 0) {
    //                 sensor.paramList.forEach(param => {
    //                   for (let i = 0, j = deviceSensor.paramList.length; i < j; i++) {
    //                     const deviceParam = deviceSensor.paramList[i]
    //                     if (param.keyName === deviceParam.keyName) {
    //                       deviceParam.value = param.value
    //                       deviceParam.updateDate = nowData.timestamp
    //                       deviceSensor.paramList.splice(i, 1, deviceParam)
    //                     }
    //                   }
    //                 })
    //               }
    //               if (sensor.settingList && sensor.settingList.length > 0 && deviceSensor.settingList && deviceSensor.settingList.length > 0) {
    //                 sensor.settingList.forEach(setting => {
    //                   for (let i = 0, j = deviceSensor.settingList.length; i < j; i++) {
    //                     const deviceSetting = deviceSensor.settingList[i]
    //                     if (setting.keyName === deviceSetting.keyName) {
    //                       deviceSetting.value = setting.value
    //                       deviceSetting.updateDate = nowData.timestamp
    //                       deviceSensor.settingList.splice(i, 1, deviceSetting)
    //                     }
    //                   }
    //                 })
    //               }
    //             }
    //           })
    //         })
    //       }
    //     }
    //   }
    // }
    // },
    formatDate(date) {
      return formatDate(this, date)
    },
    gotoSensorHistory(sensor) {
      this.$router.push({
        path: '/device/sensor/history/' + sensor.sensorId,
        query: {
          'deviceCore': this.device.deviceCore,
          'deviceName': this.device.deviceName,
          'sensorId': sensor.sensorId,
          'sensorName': sensor.sensorName,
          'port': sensor.port,
          'type': sensor.type
        }
      })
    },
    gotoSensorRealTime(sensor) {
      this.$router.push({
        path: '/device/sensor/real-time/' + sensor.sensorId,
        query: {
          'deviceCore': this.device.deviceCore,
          'deviceName': this.device.deviceName,
          'sensorId': sensor.sensorId,
          'sensorName': sensor.sensorName,
          'port': sensor.port,
          'type': sensor.type
        }
      })
    },
    gotoSensor() {
      this.$router.push({
        path: '/device/sensor/' + this.device.deviceCore,
        query: {
          'deviceCore': this.device.deviceCore,
          'deviceName': this.device.deviceName
        }
      })
    },
    gotoParam(sensor) {
      this.$router.push({
        path: '/device/param/' + this.device.deviceCore,
        query: {
          'port': sensor.port,
          'deviceCore': this.device.deviceCore,
          'sensorId': sensor.sensorId,
          'type': sensor.type,
          'sensorName': sensor.sensorName,
          'deviceName': this.device.deviceName
        }
      })
    },
    gotoSetting(sensor) {
      this.$router.push({
        path: '/device/setting/' + this.device.deviceCore,
        query: {
          'port': sensor.port,
          'deviceCore': this.device.deviceCore,
          'sensorId': sensor.sensorId,
          'type': sensor.type,
          'sensorName': sensor.sensorName,
          'deviceName': this.device.deviceName
        }
      })
    },
    gotoExplain(sensor) {
      this.$router.push({
        path: '/device/explain/' + this.device.deviceCore,
        query: {
          'port': sensor.port,
          'deviceCore': this.device.deviceCore,
          'sensorId': sensor.sensorId,
          'type': sensor.type,
          'sensorName': sensor.sensorName,
          'deviceName': this.device.deviceName
        }
      })
    },
    gotoComparison(sensor) {
      this.$router.push({
        path: '/device/sensor/analysis/' + sensor.sensorId,
        query: {
          'port': sensor.port,
          'deviceCore': this.device.deviceCore,
          'sensorId': sensor.sensorId,
          'type': sensor.type,
          'sensorName': sensor.sensorName,
          'deviceName': this.device.deviceName
        }
      })
    },
    formatSensorStatus(status) {
      if (this.device.status !== 'ONLINE') {
        return '[' + this.$t('OFFLINE') + ']'
      }
      if (status !== 'UNKNOW') {
        return '[' + this.$t(status) + ']'
      }
      return ''
    },
    enableEvalChange() {
      setEnableEval(this.enableEval)
    },
    formatSensorType(type) {
      return formatSensorType(this, type)
    },
    modelChange() {
      this.listSensorWith()
      setSensorModel(this.model)
    },
    showParamListChange() {
      setShowParamList(this.showParamList)
      this.listSensorWith()
    },
    showSettingListChange() {
      setShowSettingList(this.showSettingList)
      this.listSensorWith()
    },
    showChildDeviceChange() {
      setShowChildDevice(this.showChildDevice)
      this.listDeviceBindChildDevice()
    },
    showExplainListChange() {
      setShowExplainList(this.showExplainList)
      this.listSensorWith()
    },
    showCameraListChange() {
      setShowCameraList(this.showCameraList)
    },
    showSensorAutoChange() {
      setShowSensorAuto(this.showSensorAuto)
      this.listSensorWith()
    },
    showSearchInfoChange() {
      setShowSearchInfo(this.showSearchInfo)
      this.listSensorWith()
    },
    showHiddenChange() {
      setShowHidden(this.showHidden)
      this.listSensorWith()
    },
    showUniInterfaceChange() {
      setShowView(this.showView)
    },
    editSensor(item) {
      for (const i in this.sensorList) {
        if (this.sensorList[i].sensorId === item.sensorId) {
          item.editSensor = true
          this.sensorList.splice(i, 1, item)
          break
        }
      }
    },
    cancelUpdateSensorName(item) {
      for (const i in this.sensorList) {
        if (this.sensorList[i].sensorId === item.sensorId) {
          item.editSensor = false
          this.sensorList.splice(i, 1, item)
          break
        }
      }
    },
    updateSensorName(item) {
      updateSensor({
        sensorId: item.sensorId,
        sensorName: item.sensorName
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        for (const i in this.sensorList) {
          if (this.sensorList[i].sensorId === item.sensorId) {
            item.editSensor = false
            this.sensorList.splice(i, 1, item)
            break
          }
        }
      })
    },
    sensorExpandChange(item, row) {
      this.sensor = item
    },
    listSensorWith() {
      if (!this.device.deviceCore) {
        return
      }
      if (this.model === 'monitor') {
        this.$store
          .dispatch('view/addDevice', this.device)
      }
      if (this.model !== 'view') {
        listSensorWith({
          deviceCore: this.device.deviceCore,
          withExplain: this.showExplainList === '1',
          withParam: this.showParamList === '1',
          withSetting: this.showSettingList === '1'
        }).then(res => {
          const { code, data } = res
          if (code === '200') {
            const sensorList = []
            for (const item of data) {
              if (!item.explainList) {
                item.explainList = []
              }

              if (!item.settingList) {
                item.settingList = []
              }

              if (!item.paramList) {
                item.paramList = []
              }

              if (this.showSensorAuto === '0' ||
                (this.showExplainList === '1' && item.explainList.length > 0) ||
                (this.showSettingList === '1' && item.settingList.length > 0) ||
                (this.showParamList === '1' && item.paramList.length > 0)
              ) {
                if (this.showHidden === '1' || !item.hidden) {
                  sensorList.push(item)
                }
              }
            }
            this.sensorList = sensorList
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/element-variables.scss';

.primary-color {
  color: $--color-primary;
}

.config-item {
  margin-top: 2px;
  padding: 3px;
  /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);*/
  border-radius: 5px;
  height: 35px;
  width: 100%;
  display: flex;
  justify-content: space-between
}

.config-item:hover {
  background: #E4E7ED;
}
</style>
